<script lang="ts">
import { defineComponent } from 'vue'
import * as paragraph from '../assets/text/routeguard'
export default defineComponent({
    setup() {
        const img1 = new URL("../assets/img/lifecycle1.jpg", import.meta.url).href;   
        return {
            paragraph,
            img1, 
        }
    },
    data(){
        return {
        }
    },
    methods:{
        
    },
    beforeRouteEnter (to, from, next) {
        console.log('beforeRouteEnter...')
        next(vm => {
            // 通过 `vm` 访问组件实例
            console.log('beforeRouteEnter next callback',vm)
        })
    },
    beforeRouteUpdate (to, from) {
        // just use `this`
        console.log('beforeRouteUpdate...')
    },
    beforeRouteLeave (to, from) {
        console.log('beforeRouteLeave...')
        const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
        if (!answer) return false
    }
    

})
</script>

<template>
    <div class="home-box">
        <my-title :pageTitle="true">route guard</my-title>
        <my-title >完整的导航解析流程</my-title>
        <!-- <my-img :url="img1" w="600px"/> -->
        
        
        <my-block>
            {{paragraph.text1}}
        </my-block>
        <my-block>
            {{paragraph.text2}}
        </my-block>
        <my-code-viewer :code="paragraph.code1"></my-code-viewer>
        <my-block>
            {{paragraph.text3}}
        </my-block>
        <my-code-viewer :code="paragraph.code2"></my-code-viewer>
    </div>
</template>